import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

/*
*
*
* 在最新的 react 18 里面，渲染函数发生了变化，如果还继续使用17.0.2 里面的渲染函数，报如下的警告，为了去除这个警告，可以这样做。
* react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
*
 *  https://developer.51cto.com/article/704831.html
 *
* https://github.com/facebook/react/blob/main/CHANGELOG.md
* */
/*
* Provider 提供仓库数据
* connect 负责组件消费仓库数据
*
* react-redux 库提供的  Provider 和 connect 使用的 提供者和消费者 设计模式
* */
import {Provider} from "react-redux";

import store from './store/index.js';

/*
* 优化：1. 仓库应该提取出来，单独的在 store 目录下进行编写
* import store from './store/index.js';
*
* 优化：2. 仓库的传递应该在入口文件传递，其他的组件进行使用
* import {Provider} from "react-redux";
*   <Provider store={store}>
       <App/>
    </Provider>

* 优化：3. 组件在使用仓库数据的时候，需要自己去订阅，是否可以自动订阅
*
* 使用 react-redux 库进行实现
*
* react-redux 这个库是一个 react 的工具库，可以让我们在 react 里面更好的使用 redux。
*
* > yarn add react-redux
*
* */

ReactDOM.render(
    <React.StrictMode>
        {/*Provider 组件可以帮我们更好的去传递我们的共享仓库数据*/}
        <Provider store={store}>
            <App/>
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
